import React from 'react';
import { connect } from 'dva';
import { DownloadOutlined } from '@ant-design/icons';
import { Form } from '@ant-design/compatible';
import '@ant-design/compatible/assets/index.css';
import { Button, Table, message, Row, Spin } from 'antd';
import TextOverFlow from '../../components/TextOverFlow';
import downloadFile from '@/utils/utils';

let uploadFiles = null;
@connect(({ chargebillns, loading }) => ({
  chargebillns,
  loading: loading.models.chargebillns,
}))
@Form.create()
class ClientInfoDetails extends React.Component {
  state = {
    dataSource: [],
    allScroll: { x: 13000 },
    insAccuScroll: { x: 9000 },
    salaryScroll: { x: 4200 },
    nowPage: 1,
    pageNum: 10,
    cmTotal: 10,
    billId: '',
    titType: null, // 标题类型
    exportLoding: false,
  };

  // 社保公积金，工资的表格账单
  allColumns = [
    {
      title: '客户编号',
      dataIndex: 'custNo',
      onCell: () => ({ style: { textAlign: 'center', width: '100px' } }),
      onHeaderCell: () => ({ style: { textAlign: 'center', width: '100px' } }),
      fixed: 'left',
    },
    {
      title: '客户名称',
      dataIndex: 'custName',
      onCell: () => ({ style: { textAlign: 'center', width: '180px' } }),
      onHeaderCell: () => ({ style: { textAlign: 'center', width: '180px' } }),
      fixed: 'left',
      render: text => <TextOverFlow text={text} />,
    },
    {
      title: '姓名',
      dataIndex: 'empName',
      onCell: () => ({ style: { textAlign: 'center', width: '180px' } }),
      onHeaderCell: () => ({ style: { textAlign: 'center', width: '180px' } }),
      fixed: 'left',
    },
    {
      title: '证件号',
      dataIndex: 'cardNo',
      onCell: () => ({ style: { textAlign: 'center', width: '180px' } }),
      onHeaderCell: () => ({ style: { textAlign: 'center', width: '180px' } }),
      fixed: 'left',
    },
    {
      title: '社保个人账号',
      dataIndex: 'insIndvAccoNo',
      onCell: () => ({ style: { textAlign: 'center', width: '180px' } }),
      onHeaderCell: () => ({ style: { textAlign: 'center', width: '180px' } }),
      render: val => (val && val) || '--',
    },
    {
      title: '公积金个人账号',
      dataIndex: 'accuIndvAccoNo',
      onCell: () => ({ style: { textAlign: 'center', width: '180px' } }),
      onHeaderCell: () => ({ style: { textAlign: 'center', width: '180px' } }),
      render: val => (val && val) || '--',
    },
    {
      title: '缴费人员类别',
      dataIndex: 'insIdeName',
      onCell: () => ({ style: { textAlign: 'center', width: '180px' } }),
      onHeaderCell: () => ({ style: { textAlign: 'center', width: '180px' } }),
      render: val => val || '--',
    },
    {
      title: '业务年月',
      dataIndex: 'busiYm',
      onCell: () => ({ style: { textAlign: 'center' } }),
      onHeaderCell: () => ({ style: { textAlign: 'center' } }),
      render: text => {
        if (text) {
          return `${`${text}`.substring(0, 4)}-${`${text}`.substring(4)}`;
        }
        return null;
      },
    },
    {
      title: '养老保险',
      children: [
        {
          title: '个人账号',
          dataIndex: ['pensDet', 'assIndvAccoNo'],
          onCell: () => ({ style: { textAlign: 'center' } }),
          onHeaderCell: () => ({ style: { textAlign: 'center' } }),
          render: val => (val && val) || '--',
        },
        {
          title: '执行地',
          dataIndex: ['pensDet', 'areaName'],
          onCell: () => ({ style: { textAlign: 'center' } }),
          onHeaderCell: () => ({ style: { textAlign: 'center' } }),
        },
        {
          title: '支付方式',
          dataIndex: ['pensDet', 'pmWayName'],
          onCell: () => ({ style: { textAlign: 'center' } }),
          onHeaderCell: () => ({ style: { textAlign: 'center' } }),
        },
        {
          title: '企业基数',
          dataIndex: ['pensDet', 'entpBase'],
          onCell: () => ({ style: { textAlign: 'center' } }),
          onHeaderCell: () => ({ style: { textAlign: 'center' } }),
        },
        {
          title: '个人基数',
          dataIndex: ['pensDet', 'perBase'],
          onCell: () => ({ style: { textAlign: 'center' } }),
          onHeaderCell: () => ({ style: { textAlign: 'center' } }),
        },
        {
          title: '总额',
          dataIndex: ['pensDet', 'realFeeAmo'],
          onCell: () => ({ style: { textAlign: 'center' } }),
          onHeaderCell: () => ({ style: { textAlign: 'center' } }),
        },
        {
          title: '单位比例（%）',
          dataIndex: ['pensDet', 'entpProp'],
          onCell: () => ({ style: { textAlign: 'center' } }),
          onHeaderCell: () => ({ style: { textAlign: 'center' } }),
        },
        {
          title: '单位金额',
          dataIndex: ['pensDet', 'entpPay'],
          onCell: () => ({ style: { textAlign: 'center' } }),
          onHeaderCell: () => ({ style: { textAlign: 'center' } }),
        },
        {
          title: '个人比例（%）',
          dataIndex: ['pensDet', 'perProp'],
          onCell: () => ({ style: { textAlign: 'center' } }),
          onHeaderCell: () => ({ style: { textAlign: 'center' } }),
        },
        {
          title: '个人金额',
          dataIndex: ['pensDet', 'perPay'],
          onCell: () => ({ style: { textAlign: 'center' } }),
          onHeaderCell: () => ({ style: { textAlign: 'center' } }),
        },
      ],
    },
    {
      title: '医疗保险',
      children: [
        {
          title: '个人账号',
          dataIndex: ['medDet', 'assIndvAccoNo'],
          onCell: () => ({ style: { textAlign: 'center' } }),
          onHeaderCell: () => ({ style: { textAlign: 'center' } }),
          render: val => (val && val) || '--',
        },
        {
          title: '执行地',
          dataIndex: ['medDet', 'areaName'],
          onCell: () => ({ style: { textAlign: 'center' } }),
          onHeaderCell: () => ({ style: { textAlign: 'center' } }),
        },
        {
          title: '支付方式',
          dataIndex: ['medDet', 'pmWayName'],
          onCell: () => ({ style: { textAlign: 'center' } }),
          onHeaderCell: () => ({ style: { textAlign: 'center' } }),
        },
        {
          title: '企业基数',
          dataIndex: ['medDet', 'entpBase'],
          onCell: () => ({ style: { textAlign: 'center' } }),
          onHeaderCell: () => ({ style: { textAlign: 'center' } }),
        },
        {
          title: '个人基数',
          dataIndex: ['medDet', 'perBase'],
          onCell: () => ({ style: { textAlign: 'center' } }),
          onHeaderCell: () => ({ style: { textAlign: 'center' } }),
        },
        {
          title: '总额',
          dataIndex: ['medDet', 'realFeeAmo'],
          onCell: () => ({ style: { textAlign: 'center' } }),
          onHeaderCell: () => ({ style: { textAlign: 'center' } }),
        },
        {
          title: '单位比例（%）',
          dataIndex: ['medDet', 'entpProp'],
          onCell: () => ({ style: { textAlign: 'center' } }),
          onHeaderCell: () => ({ style: { textAlign: 'center' } }),
        },
        {
          title: '单位金额',
          dataIndex: ['medDet', 'entpPay'],
          onCell: () => ({ style: { textAlign: 'center' } }),
          onHeaderCell: () => ({ style: { textAlign: 'center' } }),
        },
        {
          title: '个人比例（%）',
          dataIndex: ['medDet', 'perProp'],
          onCell: () => ({ style: { textAlign: 'center' } }),
          onHeaderCell: () => ({ style: { textAlign: 'center' } }),
        },
        {
          title: '个人金额',
          dataIndex: ['medDet', 'perPay'],
          onCell: () => ({ style: { textAlign: 'center' } }),
          onHeaderCell: () => ({ style: { textAlign: 'center' } }),
        },
      ],
    },
    {
      title: '失业保险',
      children: [
        {
          title: '个人账号',
          dataIndex: ['unempDet', 'assIndvAccoNo'],
          onCell: () => ({ style: { textAlign: 'center' } }),
          onHeaderCell: () => ({ style: { textAlign: 'center' } }),
          render: val => (val && val) || '--',
        },
        {
          title: '执行地',
          dataIndex: ['unempDet', 'areaName'],
          onCell: () => ({ style: { textAlign: 'center' } }),
          onHeaderCell: () => ({ style: { textAlign: 'center' } }),
        },
        {
          title: '支付方式',
          dataIndex: ['unempDet', 'pmWayName'],
          onCell: () => ({ style: { textAlign: 'center' } }),
          onHeaderCell: () => ({ style: { textAlign: 'center' } }),
        },
        {
          title: '企业基数',
          dataIndex: ['unempDet', 'entpBase'],
          onCell: () => ({ style: { textAlign: 'center' } }),
          onHeaderCell: () => ({ style: { textAlign: 'center' } }),
        },
        {
          title: '个人基数',
          dataIndex: ['unempDet', 'perBase'],
          onCell: () => ({ style: { textAlign: 'center' } }),
          onHeaderCell: () => ({ style: { textAlign: 'center' } }),
        },
        {
          title: '总额',
          dataIndex: ['unempDet', 'realFeeAmo'],
          onCell: () => ({ style: { textAlign: 'center' } }),
          onHeaderCell: () => ({ style: { textAlign: 'center' } }),
        },
        {
          title: '单位比例（%）',
          dataIndex: ['unempDet', 'entpProp'],
          onCell: () => ({ style: { textAlign: 'center' } }),
          onHeaderCell: () => ({ style: { textAlign: 'center' } }),
        },
        {
          title: '单位金额',
          dataIndex: ['unempDet', 'entpPay'],
          onCell: () => ({ style: { textAlign: 'center' } }),
          onHeaderCell: () => ({ style: { textAlign: 'center' } }),
        },
        {
          title: '个人比例（%）',
          dataIndex: ['unempDet', 'perProp'],
          onCell: () => ({ style: { textAlign: 'center' } }),
          onHeaderCell: () => ({ style: { textAlign: 'center' } }),
        },
        {
          title: '个人金额',
          dataIndex: ['unempDet', 'perPay'],
          onCell: () => ({ style: { textAlign: 'center' } }),
          onHeaderCell: () => ({ style: { textAlign: 'center' } }),
        },
      ],
    },
    {
      title: '工伤保险',
      children: [
        {
          title: '个人账号',
          dataIndex: ['injDet', 'assIndvAccoNo'],
          onCell: () => ({ style: { textAlign: 'center' } }),
          onHeaderCell: () => ({ style: { textAlign: 'center' } }),
          render: val => (val && val) || '--',
        },
        {
          title: '执行地',
          dataIndex: ['injDet', 'areaName'],
          onCell: () => ({ style: { textAlign: 'center' } }),
          onHeaderCell: () => ({ style: { textAlign: 'center' } }),
        },
        {
          title: '支付方式',
          dataIndex: ['injDet', 'pmWayName'],
          onCell: () => ({ style: { textAlign: 'center' } }),
          onHeaderCell: () => ({ style: { textAlign: 'center' } }),
        },
        {
          title: '企业基数',
          dataIndex: ['injDet', 'entpBase'],
          onCell: () => ({ style: { textAlign: 'center' } }),
          onHeaderCell: () => ({ style: { textAlign: 'center' } }),
        },
        {
          title: '个人基数',
          dataIndex: ['injDet', 'perBase'],
          onCell: () => ({ style: { textAlign: 'center' } }),
          onHeaderCell: () => ({ style: { textAlign: 'center' } }),
        },
        {
          title: '总额',
          dataIndex: ['injDet', 'realFeeAmo'],
          onCell: () => ({ style: { textAlign: 'center' } }),
          onHeaderCell: () => ({ style: { textAlign: 'center' } }),
        },
        {
          title: '单位比例（%）',
          dataIndex: ['injDet', 'entpProp'],
          onCell: () => ({ style: { textAlign: 'center' } }),
          onHeaderCell: () => ({ style: { textAlign: 'center' } }),
        },
        {
          title: '单位金额',
          dataIndex: ['injDet', 'entpPay'],
          onCell: () => ({ style: { textAlign: 'center' } }),
          onHeaderCell: () => ({ style: { textAlign: 'center' } }),
        },
        {
          title: '个人比例（%）',
          dataIndex: ['injDet', 'perProp'],
          onCell: () => ({ style: { textAlign: 'center' } }),
          onHeaderCell: () => ({ style: { textAlign: 'center' } }),
        },
        {
          title: '个人金额',
          dataIndex: ['injDet', 'perPay'],
          onCell: () => ({ style: { textAlign: 'center' } }),
          onHeaderCell: () => ({ style: { textAlign: 'center' } }),
        },
      ],
    },
    {
      title: '生育保险',
      children: [
        {
          title: '个人账号',
          dataIndex: ['birthDet', 'assIndvAccoNo'],
          onCell: () => ({ style: { textAlign: 'center' } }),
          onHeaderCell: () => ({ style: { textAlign: 'center' } }),
          render: val => (val && val) || '--',
        },
        {
          title: '执行地',
          dataIndex: ['birthDet', 'areaName'],
          onCell: () => ({ style: { textAlign: 'center' } }),
          onHeaderCell: () => ({ style: { textAlign: 'center' } }),
        },
        {
          title: '支付方式',
          dataIndex: ['birthDet', 'pmWayName'],
          onCell: () => ({ style: { textAlign: 'center' } }),
          onHeaderCell: () => ({ style: { textAlign: 'center' } }),
        },
        {
          title: '企业基数',
          dataIndex: ['birthDet', 'entpBase'],
          onCell: () => ({ style: { textAlign: 'center' } }),
          onHeaderCell: () => ({ style: { textAlign: 'center' } }),
        },
        {
          title: '个人基数',
          dataIndex: ['birthDet', 'perBase'],
          onCell: () => ({ style: { textAlign: 'center' } }),
          onHeaderCell: () => ({ style: { textAlign: 'center' } }),
        },
        {
          title: '总额',
          dataIndex: ['birthDet', 'realFeeAmo'],
          onCell: () => ({ style: { textAlign: 'center' } }),
          onHeaderCell: () => ({ style: { textAlign: 'center' } }),
        },
        {
          title: '单位比例（%）',
          dataIndex: ['birthDet', 'entpProp'],
          onCell: () => ({ style: { textAlign: 'center' } }),
          onHeaderCell: () => ({ style: { textAlign: 'center' } }),
        },
        {
          title: '单位金额',
          dataIndex: ['birthDet', 'entpPay'],
          onCell: () => ({ style: { textAlign: 'center' } }),
          onHeaderCell: () => ({ style: { textAlign: 'center' } }),
        },
        {
          title: '个人比例（%）',
          dataIndex: ['birthDet', 'perProp'],
          onCell: () => ({ style: { textAlign: 'center' } }),
          onHeaderCell: () => ({ style: { textAlign: 'center' } }),
        },
        {
          title: '个人金额',
          dataIndex: ['birthDet', 'perPay'],
          onCell: () => ({ style: { textAlign: 'center' } }),
          onHeaderCell: () => ({ style: { textAlign: 'center' } }),
        },
      ],
    },
    {
      title: '住房公积金',
      children: [
        {
          title: '执行地',
          dataIndex: ['accuDet', 'areaName'],
          onCell: () => ({ style: { textAlign: 'center' } }),
          onHeaderCell: () => ({ style: { textAlign: 'center' } }),
        },
        {
          title: '支付方式',
          dataIndex: ['accuDet', 'pmWayName'],
          onCell: () => ({ style: { textAlign: 'center' } }),
          onHeaderCell: () => ({ style: { textAlign: 'center' } }),
        },
        {
          title: '企业基数',
          dataIndex: ['accuDet', 'entpBase'],
          onCell: () => ({ style: { textAlign: 'center' } }),
          onHeaderCell: () => ({ style: { textAlign: 'center' } }),
        },
        {
          title: '个人基数',
          dataIndex: ['accuDet', 'perBase'],
          onCell: () => ({ style: { textAlign: 'center' } }),
          onHeaderCell: () => ({ style: { textAlign: 'center' } }),
        },
        {
          title: '总额',
          dataIndex: ['accuDet', 'realFeeAmo'],
          onCell: () => ({ style: { textAlign: 'center' } }),
          onHeaderCell: () => ({ style: { textAlign: 'center' } }),
        },
        {
          title: '单位比例（%）',
          dataIndex: ['accuDet', 'entpProp'],
          onCell: () => ({ style: { textAlign: 'center' } }),
          onHeaderCell: () => ({ style: { textAlign: 'center' } }),
        },
        {
          title: '单位金额',
          dataIndex: ['accuDet', 'entpPay'],
          onCell: () => ({ style: { textAlign: 'center' } }),
          onHeaderCell: () => ({ style: { textAlign: 'center' } }),
        },
        {
          title: '个人比例（%）',
          dataIndex: ['accuDet', 'perProp'],
          onCell: () => ({ style: { textAlign: 'center' } }),
          onHeaderCell: () => ({ style: { textAlign: 'center' } }),
        },
        {
          title: '个人金额',
          dataIndex: ['accuDet', 'perPay'],
          onCell: () => ({ style: { textAlign: 'center' } }),
          onHeaderCell: () => ({ style: { textAlign: 'center' } }),
        },
      ],
    },
    {
      title: '个人社保总计',
      dataIndex: 'perInsSum',
      onCell: () => ({ style: { textAlign: 'center' } }),
      onHeaderCell: () => ({ style: { textAlign: 'center' } }),
    },
    {
      title: '单位社保总计',
      dataIndex: 'entpInsSum',
      onCell: () => ({ style: { textAlign: 'center' } }),
      onHeaderCell: () => ({ style: { textAlign: 'center' } }),
    },
    {
      title: '社保缴纳合计',
      dataIndex: 'insPaySum',
      onCell: () => ({ style: { textAlign: 'center' } }),
      onHeaderCell: () => ({ style: { textAlign: 'center' } }),
    },
    {
      title: '公积金缴纳合计',
      dataIndex: 'accuPaySum',
      onCell: () => ({ style: { textAlign: 'center' } }),
      onHeaderCell: () => ({ style: { textAlign: 'center' } }),
    },
    {
      title: '社保公积金缴纳合计',
      dataIndex: 'insAccuPaySum',
      onCell: () => ({ style: { textAlign: 'center' } }),
      onHeaderCell: () => ({ style: { textAlign: 'center' } }),
    },
    {
      title: '服务费',
      dataIndex: 'serFee',
      onCell: () => ({ style: { textAlign: 'center' } }),
      onHeaderCell: () => ({ style: { textAlign: 'center' } }),
    },
    {
      title: '一次性费用',
      children: [
        {
          title: '总金额',
          dataIndex: ['onceFee', 'feeAmo'],
          onCell: () => ({ style: { textAlign: 'center' } }),
          onHeaderCell: () => ({ style: { textAlign: 'center' } }),
        },
        {
          title: '个人部分',
          dataIndex: ['onceFee', 'perAmo'],
          onCell: () => ({ style: { textAlign: 'center' } }),
          onHeaderCell: () => ({ style: { textAlign: 'center' } }),
        },
        {
          title: '企业部分',
          dataIndex: ['onceFee', 'entpAmo'],
          onCell: () => ({ style: { textAlign: 'center' } }),
          onHeaderCell: () => ({ style: { textAlign: 'center' } }),
        },
        {
          title: '服务费',
          dataIndex: ['onceFee', 'fee'],
          onCell: () => ({ style: { textAlign: 'center' } }),
          onHeaderCell: () => ({ style: { textAlign: 'center' } }),
        },
      ],
    },
    {
      title: '一次性费用说明',
      dataIndex: ['onceFee', 'detail'],
      onCell: () => ({ style: { textAlign: 'center' } }),
      onHeaderCell: () => ({ style: { textAlign: 'center' } }),
    },
    {
      title: '工资',
      children: [
        {
          title: '工资金额',
          dataIndex: ['wageDet', 'incmAmo'],
          onCell: () => ({ style: { textAlign: 'center' } }),
          onHeaderCell: () => ({ style: { textAlign: 'center' } }),
        },
        {
          title: '本期免税收入',
          dataIndex: ['wageDet', 'advAdjAmo'],
          onCell: () => ({ style: { textAlign: 'center' } }),
          onHeaderCell: () => ({ style: { textAlign: 'center' } }),
        },
        {
          title: '养老个人',
          dataIndex: ['wageDet', 'pensAmo'],
          onCell: () => ({ style: { textAlign: 'center' } }),
          onHeaderCell: () => ({ style: { textAlign: 'center' } }),
        },
        {
          title: '医疗个人',
          dataIndex: ['wageDet', 'medAmo'],
          onCell: () => ({ style: { textAlign: 'center' } }),
          onHeaderCell: () => ({ style: { textAlign: 'center' } }),
        },
        {
          title: '失业个人',
          dataIndex: ['wageDet', 'unempAmo'],
          onCell: () => ({ style: { textAlign: 'center' } }),
          onHeaderCell: () => ({ style: { textAlign: 'center' } }),
        },
        {
          title: '公积金个人',
          dataIndex: ['wageDet', 'accuAmo'],
          onCell: () => ({ style: { textAlign: 'center' } }),
          onHeaderCell: () => ({ style: { textAlign: 'center' } }),
        },
        {
          title: '累计子女教育支出',
          dataIndex: ['wageDet', 'acumChildEduPay'],
          onCell: () => ({ style: { textAlign: 'center' } }),
          onHeaderCell: () => ({ style: { textAlign: 'center' } }),
        },
        {
          title: '累计继续教育支出',
          dataIndex: ['wageDet', 'acumCntnuEduPay'],
          onCell: () => ({ style: { textAlign: 'center' } }),
          onHeaderCell: () => ({ style: { textAlign: 'center' } }),
        },
        {
          title: '累计住房贷款利息支出',
          dataIndex: ['wageDet', 'acumHousMortgPay'],
          onCell: () => ({ style: { textAlign: 'center' } }),
          onHeaderCell: () => ({ style: { textAlign: 'center' } }),
        },
        {
          title: '累计住房租金支出',
          dataIndex: ['wageDet', 'acumHousRentPay'],
          onCell: () => ({ style: { textAlign: 'center' } }),
          onHeaderCell: () => ({ style: { textAlign: 'center' } }),
        },
        {
          title: '累计赡养老人支出',
          dataIndex: ['wageDet', 'acumSuptElderPay'],
          onCell: () => ({ style: { textAlign: 'center' } }),
          onHeaderCell: () => ({ style: { textAlign: 'center' } }),
        },
        {
          title: '企业（职业）年金',
          dataIndex: ['wageDet', 'firmAnnui'],
          onCell: () => ({ style: { textAlign: 'center' } }),
          onHeaderCell: () => ({ style: { textAlign: 'center' } }),
        },
        {
          title: '商业健康保险',
          dataIndex: ['wageDet', 'comAnnui'],
          onCell: () => ({ style: { textAlign: 'center' } }),
          onHeaderCell: () => ({ style: { textAlign: 'center' } }),
        },
        {
          title: '税延养老保险',
          dataIndex: ['wageDet', 'defrPenAnnui'],
          onCell: () => ({ style: { textAlign: 'center' } }),
          onHeaderCell: () => ({ style: { textAlign: 'center' } }),
        },
        {
          title: '其他抵扣',
          dataIndex: ['wageDet', 'otherDedu'],
          onCell: () => ({ style: { textAlign: 'center' } }),
          onHeaderCell: () => ({ style: { textAlign: 'center' } }),
        },
        {
          title: '准予扣除的捐赠额',
          dataIndex: ['wageDet', 'allowDdctblDon'],
          onCell: () => ({ style: { textAlign: 'center' } }),
          onHeaderCell: () => ({ style: { textAlign: 'center' } }),
        },
        {
          title: '减免税额',
          dataIndex: ['wageDet', 'ddctblAmo'],
          onCell: () => ({ style: { textAlign: 'center' } }),
          onHeaderCell: () => ({ style: { textAlign: 'center' } }),
        },
        {
          title: '本月应缴税额',
          dataIndex: ['wageDet', 'taxblAmo'],
          onCell: () => ({ style: { textAlign: 'center' } }),
          onHeaderCell: () => ({ style: { textAlign: 'center' } }),
        },
        {
          title: '税后扣款',
          dataIndex: ['wageDet', 'aftAdjAmo'],
          onCell: () => ({ style: { textAlign: 'center' } }),
          onHeaderCell: () => ({ style: { textAlign: 'center' } }),
        },
        {
          title: '补退税额(上月)',
          dataIndex: ['wageDet', 'agoRtnAmo'],
          onCell: () => ({ style: { textAlign: 'center' } }),
          onHeaderCell: () => ({ style: { textAlign: 'center' } }),
        },
        {
          title: '实发金额',
          dataIndex: ['wageDet', 'realAmo'],
          onCell: () => ({ style: { textAlign: 'center' } }),
          onHeaderCell: () => ({ style: { textAlign: 'center' } }),
        },
        {
          title: '补退税额(本月)',
          dataIndex: ['wageDet', 'nowRtnAmo'],
          onCell: () => ({ style: { textAlign: 'center' } }),
          onHeaderCell: () => ({ style: { textAlign: 'center' } }),
        },
      ],
    },
    {
      title: '年终奖',
      children: [
        {
          title: '年终奖金额',
          dataIndex: ['yearEndDet', 'incmAmo'],
          onCell: () => ({ style: { textAlign: 'center' } }),
          onHeaderCell: () => ({ style: { textAlign: 'center' } }),
        },
        {
          title: '年终奖个人所得税',
          dataIndex: ['yearEndDet', 'taxblAmo'],
          onCell: () => ({ style: { textAlign: 'center' } }),
          onHeaderCell: () => ({ style: { textAlign: 'center' } }),
        },
        {
          title: '年终奖实发金额',
          dataIndex: ['yearEndDet', 'realAmo'],
          onCell: () => ({ style: { textAlign: 'center' } }),
          onHeaderCell: () => ({ style: { textAlign: 'center' } }),
        },
      ],
    },
    {
      title: '离职补偿金',
      children: [
        {
          title: '离职补偿金金额',
          dataIndex: ['resignDet', 'incmAmo'],
          onCell: () => ({ style: { textAlign: 'center' } }),
          onHeaderCell: () => ({ style: { textAlign: 'center' } }),
        },
        {
          title: '离职补偿金个人所得税',
          dataIndex: ['resignDet', 'taxblAmo'],
          onCell: () => ({ style: { textAlign: 'center' } }),
          onHeaderCell: () => ({ style: { textAlign: 'center' } }),
        },
        {
          title: '离职补偿金实发金额',
          dataIndex: ['resignDet', 'realAmo'],
          onCell: () => ({ style: { textAlign: 'center' } }),
          onHeaderCell: () => ({ style: { textAlign: 'center' } }),
        },
      ],
    },
    {
      title: '劳务报酬',
      children: [
        {
          title: '劳务报酬金额',
          dataIndex: ['remuneDet', 'incmAmo'],
          onCell: () => ({ style: { textAlign: 'center' } }),
          onHeaderCell: () => ({ style: { textAlign: 'center' } }),
        },
        {
          title: '劳务报酬个人所得税',
          dataIndex: ['remuneDet', 'taxblAmo'],
          onCell: () => ({ style: { textAlign: 'center' } }),
          onHeaderCell: () => ({ style: { textAlign: 'center' } }),
        },
        {
          title: '劳务报酬实发金额',
          dataIndex: ['remuneDet', 'realAmo'],
          onCell: () => ({ style: { textAlign: 'center' } }),
          onHeaderCell: () => ({ style: { textAlign: 'center' } }),
        },
      ],
    },
    {
      title: '实发合计',
      dataIndex: 'wageRealAmo',
      onCell: () => ({ style: { textAlign: 'center' } }),
      onHeaderCell: () => ({ style: { textAlign: 'center' } }),
    },
    {
      title: '个税合计',
      dataIndex: 'wageTaxblAmo',
      onCell: () => ({ style: { textAlign: 'center' } }),
      onHeaderCell: () => ({ style: { textAlign: 'center' } }),
    },
    {
      title: '工资应收合计',
      dataIndex: 'wageSum',
      onCell: () => ({ style: { textAlign: 'center' } }),
      onHeaderCell: () => ({ style: { textAlign: 'center' } }),
    },
    {
      title: '合计',
      dataIndex: 'sum',
      onCell: () => ({ style: { textAlign: 'center' } }),
      onHeaderCell: () => ({ style: { textAlign: 'center' } }),
    },
  ];

  // 社保公积金表格账单
  insAccuColumns = [
    {
      title: '客户编号',
      dataIndex: 'custNo',
      onCell: () => ({ style: { textAlign: 'center', width: '100px' } }),
      onHeaderCell: () => ({ style: { textAlign: 'center', width: '100px' } }),
      fixed: 'left',
    },
    {
      title: '客户名称',
      dataIndex: 'custName',
      onCell: () => ({ style: { textAlign: 'center', width: '180px' } }),
      onHeaderCell: () => ({ style: { textAlign: 'center', width: '180px' } }),
      fixed: 'left',
      render: text => <TextOverFlow text={text} />,
    },
    {
      title: '姓名',
      dataIndex: 'empName',
      onCell: () => ({ style: { textAlign: 'center', width: '180px' } }),
      onHeaderCell: () => ({ style: { textAlign: 'center', width: '180px' } }),
      fixed: 'left',
    },
    {
      title: '证件号',
      dataIndex: 'cardNo',
      onCell: () => ({ style: { textAlign: 'center', width: '180px' } }),
      onHeaderCell: () => ({ style: { textAlign: 'center', width: '180px' } }),
      fixed: 'left',
    },
    {
      title: '社保个人账号',
      dataIndex: 'insIndvAccoNo',
      onCell: () => ({ style: { textAlign: 'center', width: '180px' } }),
      onHeaderCell: () => ({ style: { textAlign: 'center', width: '180px' } }),
      render: val => (val && val) || '--',
    },
    {
      title: '公积金个人账号',
      dataIndex: 'accuIndvAccoNo',
      onCell: () => ({ style: { textAlign: 'center', width: '180px' } }),
      onHeaderCell: () => ({ style: { textAlign: 'center', width: '180px' } }),
      render: val => (val && val) || '--',
    },
    {
      title: '缴费人员类别',
      dataIndex: 'insIdeName',
      onCell: () => ({ style: { textAlign: 'center', width: '180px' } }),
      onHeaderCell: () => ({ style: { textAlign: 'center', width: '180px' } }),
      render: val => val || '--',
    },
    {
      title: '业务年月',
      dataIndex: 'busiYm',
      onCell: () => ({ style: { textAlign: 'center' } }),
      onHeaderCell: () => ({ style: { textAlign: 'center' } }),
      render: text => {
        if (text) {
          return `${`${text}`.substring(0, 4)}-${`${text}`.substring(4)}`;
        }
        return null;
      },
    },
    {
      title: '养老保险',
      children: [
        {
          title: '个人账号',
          dataIndex: ['pensDet', 'assIndvAccoNo'],
          onCell: () => ({ style: { textAlign: 'center' } }),
          onHeaderCell: () => ({ style: { textAlign: 'center' } }),
          render: val => (val && val) || '--',
        },
        {
          title: '执行地',
          dataIndex: ['pensDet', 'areaName'],
          onCell: () => ({ style: { textAlign: 'center' } }),
          onHeaderCell: () => ({ style: { textAlign: 'center' } }),
        },
        {
          title: '支付方式',
          dataIndex: ['pensDet', 'pmWayName'],
          onCell: () => ({ style: { textAlign: 'center' } }),
          onHeaderCell: () => ({ style: { textAlign: 'center' } }),
        },
        {
          title: '企业基数',
          dataIndex: ['pensDet', 'entpBase'],
          onCell: () => ({ style: { textAlign: 'center' } }),
          onHeaderCell: () => ({ style: { textAlign: 'center' } }),
        },
        {
          title: '个人基数',
          dataIndex: ['pensDet', 'perBase'],
          onCell: () => ({ style: { textAlign: 'center' } }),
          onHeaderCell: () => ({ style: { textAlign: 'center' } }),
        },
        {
          title: '总额',
          dataIndex: ['pensDet', 'realFeeAmo'],
          onCell: () => ({ style: { textAlign: 'center' } }),
          onHeaderCell: () => ({ style: { textAlign: 'center' } }),
        },
        {
          title: '单位比例（%）',
          dataIndex: ['pensDet', 'entpProp'],
          onCell: () => ({ style: { textAlign: 'center' } }),
          onHeaderCell: () => ({ style: { textAlign: 'center' } }),
        },
        {
          title: '单位金额',
          dataIndex: ['pensDet', 'entpPay'],
          onCell: () => ({ style: { textAlign: 'center' } }),
          onHeaderCell: () => ({ style: { textAlign: 'center' } }),
        },
        {
          title: '个人比例（%）',
          dataIndex: ['pensDet', 'perProp'],
          onCell: () => ({ style: { textAlign: 'center' } }),
          onHeaderCell: () => ({ style: { textAlign: 'center' } }),
        },
        {
          title: '个人金额',
          dataIndex: ['pensDet', 'perPay'],
          onCell: () => ({ style: { textAlign: 'center' } }),
          onHeaderCell: () => ({ style: { textAlign: 'center' } }),
        },
      ],
    },
    {
      title: '医疗保险',
      children: [
        {
          title: '个人账号',
          dataIndex: ['medDet', 'assIndvAccoNo'],
          onCell: () => ({ style: { textAlign: 'center' } }),
          onHeaderCell: () => ({ style: { textAlign: 'center' } }),
          render: val => (val && val) || '--',
        },
        {
          title: '执行地',
          dataIndex: ['medDet', 'areaName'],
          onCell: () => ({ style: { textAlign: 'center' } }),
          onHeaderCell: () => ({ style: { textAlign: 'center' } }),
        },
        {
          title: '支付方式',
          dataIndex: ['medDet', 'pmWayName'],
          onCell: () => ({ style: { textAlign: 'center' } }),
          onHeaderCell: () => ({ style: { textAlign: 'center' } }),
        },
        {
          title: '企业基数',
          dataIndex: ['medDet', 'entpBase'],
          onCell: () => ({ style: { textAlign: 'center' } }),
          onHeaderCell: () => ({ style: { textAlign: 'center' } }),
        },
        {
          title: '个人基数',
          dataIndex: ['medDet', 'perBase'],
          onCell: () => ({ style: { textAlign: 'center' } }),
          onHeaderCell: () => ({ style: { textAlign: 'center' } }),
        },
        {
          title: '总额',
          dataIndex: ['medDet', 'realFeeAmo'],
          onCell: () => ({ style: { textAlign: 'center' } }),
          onHeaderCell: () => ({ style: { textAlign: 'center' } }),
        },
        {
          title: '单位比例（%）',
          dataIndex: ['medDet', 'entpProp'],
          onCell: () => ({ style: { textAlign: 'center' } }),
          onHeaderCell: () => ({ style: { textAlign: 'center' } }),
        },
        {
          title: '单位金额',
          dataIndex: ['medDet', 'entpPay'],
          onCell: () => ({ style: { textAlign: 'center' } }),
          onHeaderCell: () => ({ style: { textAlign: 'center' } }),
        },
        {
          title: '个人比例（%）',
          dataIndex: ['medDet', 'perProp'],
          onCell: () => ({ style: { textAlign: 'center' } }),
          onHeaderCell: () => ({ style: { textAlign: 'center' } }),
        },
        {
          title: '个人金额',
          dataIndex: ['medDet', 'perPay'],
          onCell: () => ({ style: { textAlign: 'center' } }),
          onHeaderCell: () => ({ style: { textAlign: 'center' } }),
        },
      ],
    },
    {
      title: '失业保险',
      children: [
        {
          title: '个人账号',
          dataIndex: ['unempDet', 'assIndvAccoNo'],
          onCell: () => ({ style: { textAlign: 'center' } }),
          onHeaderCell: () => ({ style: { textAlign: 'center' } }),
          render: val => (val && val) || '--',
        },
        {
          title: '执行地',
          dataIndex: ['unempDet', 'areaName'],
          onCell: () => ({ style: { textAlign: 'center' } }),
          onHeaderCell: () => ({ style: { textAlign: 'center' } }),
        },
        {
          title: '支付方式',
          dataIndex: ['unempDet', 'pmWayName'],
          onCell: () => ({ style: { textAlign: 'center' } }),
          onHeaderCell: () => ({ style: { textAlign: 'center' } }),
        },
        {
          title: '企业基数',
          dataIndex: ['unempDet', 'entpBase'],
          onCell: () => ({ style: { textAlign: 'center' } }),
          onHeaderCell: () => ({ style: { textAlign: 'center' } }),
        },
        {
          title: '个人基数',
          dataIndex: ['unempDet', 'perBase'],
          onCell: () => ({ style: { textAlign: 'center' } }),
          onHeaderCell: () => ({ style: { textAlign: 'center' } }),
        },
        {
          title: '总额',
          dataIndex: ['unempDet', 'realFeeAmo'],
          onCell: () => ({ style: { textAlign: 'center' } }),
          onHeaderCell: () => ({ style: { textAlign: 'center' } }),
        },
        {
          title: '单位比例（%）',
          dataIndex: ['unempDet', 'entpProp'],
          onCell: () => ({ style: { textAlign: 'center' } }),
          onHeaderCell: () => ({ style: { textAlign: 'center' } }),
        },
        {
          title: '单位金额',
          dataIndex: ['unempDet', 'entpPay'],
          onCell: () => ({ style: { textAlign: 'center' } }),
          onHeaderCell: () => ({ style: { textAlign: 'center' } }),
        },
        {
          title: '个人比例（%）',
          dataIndex: ['unempDet', 'perProp'],
          onCell: () => ({ style: { textAlign: 'center' } }),
          onHeaderCell: () => ({ style: { textAlign: 'center' } }),
        },
        {
          title: '个人金额',
          dataIndex: ['unempDet', 'perPay'],
          onCell: () => ({ style: { textAlign: 'center' } }),
          onHeaderCell: () => ({ style: { textAlign: 'center' } }),
        },
      ],
    },
    {
      title: '工伤保险',
      children: [
        {
          title: '个人账号',
          dataIndex: ['injDet', 'assIndvAccoNo'],
          onCell: () => ({ style: { textAlign: 'center' } }),
          onHeaderCell: () => ({ style: { textAlign: 'center' } }),
          render: val => (val && val) || '--',
        },
        {
          title: '执行地',
          dataIndex: ['injDet', 'areaName'],
          onCell: () => ({ style: { textAlign: 'center' } }),
          onHeaderCell: () => ({ style: { textAlign: 'center' } }),
        },
        {
          title: '支付方式',
          dataIndex: ['injDet', 'pmWayName'],
          onCell: () => ({ style: { textAlign: 'center' } }),
          onHeaderCell: () => ({ style: { textAlign: 'center' } }),
        },
        {
          title: '企业基数',
          dataIndex: ['injDet', 'entpBase'],
          onCell: () => ({ style: { textAlign: 'center' } }),
          onHeaderCell: () => ({ style: { textAlign: 'center' } }),
        },
        {
          title: '个人基数',
          dataIndex: ['injDet', 'perBase'],
          onCell: () => ({ style: { textAlign: 'center' } }),
          onHeaderCell: () => ({ style: { textAlign: 'center' } }),
        },
        {
          title: '总额',
          dataIndex: ['injDet', 'realFeeAmo'],
          onCell: () => ({ style: { textAlign: 'center' } }),
          onHeaderCell: () => ({ style: { textAlign: 'center' } }),
        },
        {
          title: '单位比例（%）',
          dataIndex: ['injDet', 'entpProp'],
          onCell: () => ({ style: { textAlign: 'center' } }),
          onHeaderCell: () => ({ style: { textAlign: 'center' } }),
        },
        {
          title: '单位金额',
          dataIndex: ['injDet', 'entpPay'],
          onCell: () => ({ style: { textAlign: 'center' } }),
          onHeaderCell: () => ({ style: { textAlign: 'center' } }),
        },
        {
          title: '个人比例（%）',
          dataIndex: ['injDet', 'perProp'],
          onCell: () => ({ style: { textAlign: 'center' } }),
          onHeaderCell: () => ({ style: { textAlign: 'center' } }),
        },
        {
          title: '个人金额',
          dataIndex: ['injDet', 'perPay'],
          onCell: () => ({ style: { textAlign: 'center' } }),
          onHeaderCell: () => ({ style: { textAlign: 'center' } }),
        },
      ],
    },
    {
      title: '生育保险',
      children: [
        {
          title: '个人账号',
          dataIndex: ['birthDet', 'assIndvAccoNo'],
          onCell: () => ({ style: { textAlign: 'center' } }),
          onHeaderCell: () => ({ style: { textAlign: 'center' } }),
          render: val => (val && val) || '--',
        },
        {
          title: '执行地',
          dataIndex: ['birthDet', 'areaName'],
          onCell: () => ({ style: { textAlign: 'center' } }),
          onHeaderCell: () => ({ style: { textAlign: 'center' } }),
        },
        {
          title: '支付方式',
          dataIndex: ['birthDet', 'pmWayName'],
          onCell: () => ({ style: { textAlign: 'center' } }),
          onHeaderCell: () => ({ style: { textAlign: 'center' } }),
        },
        {
          title: '企业基数',
          dataIndex: ['birthDet', 'entpBase'],
          onCell: () => ({ style: { textAlign: 'center' } }),
          onHeaderCell: () => ({ style: { textAlign: 'center' } }),
        },
        {
          title: '个人基数',
          dataIndex: ['birthDet', 'perBase'],
          onCell: () => ({ style: { textAlign: 'center' } }),
          onHeaderCell: () => ({ style: { textAlign: 'center' } }),
        },
        {
          title: '总额',
          dataIndex: ['birthDet', 'realFeeAmo'],
          onCell: () => ({ style: { textAlign: 'center' } }),
          onHeaderCell: () => ({ style: { textAlign: 'center' } }),
        },
        {
          title: '单位比例（%）',
          dataIndex: ['birthDet', 'entpProp'],
          onCell: () => ({ style: { textAlign: 'center' } }),
          onHeaderCell: () => ({ style: { textAlign: 'center' } }),
        },
        {
          title: '单位金额',
          dataIndex: ['birthDet', 'entpPay'],
          onCell: () => ({ style: { textAlign: 'center' } }),
          onHeaderCell: () => ({ style: { textAlign: 'center' } }),
        },
        {
          title: '个人比例（%）',
          dataIndex: ['birthDet', 'perProp'],
          onCell: () => ({ style: { textAlign: 'center' } }),
          onHeaderCell: () => ({ style: { textAlign: 'center' } }),
        },
        {
          title: '个人金额',
          dataIndex: ['birthDet', 'perPay'],
          onCell: () => ({ style: { textAlign: 'center' } }),
          onHeaderCell: () => ({ style: { textAlign: 'center' } }),
        },
      ],
    },
    {
      title: '住房公积金',
      children: [
        {
          title: '执行地',
          dataIndex: ['accuDet', 'areaName'],
          onCell: () => ({ style: { textAlign: 'center' } }),
          onHeaderCell: () => ({ style: { textAlign: 'center' } }),
        },
        {
          title: '支付方式',
          dataIndex: ['accuDet', 'pmWayName'],
          onCell: () => ({ style: { textAlign: 'center' } }),
          onHeaderCell: () => ({ style: { textAlign: 'center' } }),
        },
        {
          title: '企业基数',
          dataIndex: ['accuDet', 'entpBase'],
          onCell: () => ({ style: { textAlign: 'center' } }),
          onHeaderCell: () => ({ style: { textAlign: 'center' } }),
        },
        {
          title: '个人基数',
          dataIndex: ['accuDet', 'perBase'],
          onCell: () => ({ style: { textAlign: 'center' } }),
          onHeaderCell: () => ({ style: { textAlign: 'center' } }),
        },
        {
          title: '总额',
          dataIndex: ['accuDet', 'realFeeAmo'],
          onCell: () => ({ style: { textAlign: 'center' } }),
          onHeaderCell: () => ({ style: { textAlign: 'center' } }),
        },
        {
          title: '单位比例（%）',
          dataIndex: ['accuDet', 'entpProp'],
          onCell: () => ({ style: { textAlign: 'center' } }),
          onHeaderCell: () => ({ style: { textAlign: 'center' } }),
        },
        {
          title: '单位金额',
          dataIndex: ['accuDet', 'entpPay'],
          onCell: () => ({ style: { textAlign: 'center' } }),
          onHeaderCell: () => ({ style: { textAlign: 'center' } }),
        },
        {
          title: '个人比例（%）',
          dataIndex: ['accuDet', 'perProp'],
          onCell: () => ({ style: { textAlign: 'center' } }),
          onHeaderCell: () => ({ style: { textAlign: 'center' } }),
        },
        {
          title: '个人金额',
          dataIndex: ['accuDet', 'perPay'],
          onCell: () => ({ style: { textAlign: 'center' } }),
          onHeaderCell: () => ({ style: { textAlign: 'center' } }),
        },
      ],
    },
    {
      title: '个人社保总计',
      dataIndex: 'perInsSum',
      onCell: () => ({ style: { textAlign: 'center' } }),
      onHeaderCell: () => ({ style: { textAlign: 'center' } }),
    },
    {
      title: '单位社保总计',
      dataIndex: 'entpInsSum',
      onCell: () => ({ style: { textAlign: 'center' } }),
      onHeaderCell: () => ({ style: { textAlign: 'center' } }),
    },
    {
      title: '社保缴纳合计',
      dataIndex: 'insPaySum',
      onCell: () => ({ style: { textAlign: 'center' } }),
      onHeaderCell: () => ({ style: { textAlign: 'center' } }),
    },
    {
      title: '公积金缴纳合计',
      dataIndex: 'accuPaySum',
      onCell: () => ({ style: { textAlign: 'center' } }),
      onHeaderCell: () => ({ style: { textAlign: 'center' } }),
    },
    {
      title: '社保公积金缴纳合计',
      dataIndex: 'insAccuPaySum',
      onCell: () => ({ style: { textAlign: 'center' } }),
      onHeaderCell: () => ({ style: { textAlign: 'center' } }),
    },
    {
      title: '服务费',
      dataIndex: 'serFee',
      onCell: () => ({ style: { textAlign: 'center' } }),
      onHeaderCell: () => ({ style: { textAlign: 'center' } }),
    },
    {
      title: '一次性费用',
      children: [
        {
          title: '总金额',
          dataIndex: ['onceFee', 'feeAmo'],
          onCell: () => ({ style: { textAlign: 'center' } }),
          onHeaderCell: () => ({ style: { textAlign: 'center' } }),
        },
        {
          title: '个人部分',
          dataIndex: ['onceFee', 'perAmo'],
          onCell: () => ({ style: { textAlign: 'center' } }),
          onHeaderCell: () => ({ style: { textAlign: 'center' } }),
        },
        {
          title: '企业部分',
          dataIndex: ['onceFee', 'entpAmo'],
          onCell: () => ({ style: { textAlign: 'center' } }),
          onHeaderCell: () => ({ style: { textAlign: 'center' } }),
        },
        {
          title: '服务费',
          dataIndex: ['onceFee', 'fee'],
          onCell: () => ({ style: { textAlign: 'center' } }),
          onHeaderCell: () => ({ style: { textAlign: 'center' } }),
        },
      ],
    },
    {
      title: '一次性费用说明',
      dataIndex: ['onceFee', 'detail'],
      onCell: () => ({ style: { textAlign: 'center' } }),
      onHeaderCell: () => ({ style: { textAlign: 'center' } }),
    },
    {
      title: '合计',
      dataIndex: 'sum',
      onCell: () => ({ style: { textAlign: 'center' } }),
      onHeaderCell: () => ({ style: { textAlign: 'center' } }),
    },
  ];

  // 工资表格账单
  salaryColumns = [
    {
      title: '客户编号',
      dataIndex: 'custNo',
      onCell: () => ({ style: { textAlign: 'center', width: '100px' } }),
      onHeaderCell: () => ({ style: { textAlign: 'center', width: '100px' } }),
      fixed: 'left',
    },
    {
      title: '客户名称',
      dataIndex: 'custName',
      onCell: () => ({ style: { textAlign: 'center', width: '180px' } }),
      onHeaderCell: () => ({ style: { textAlign: 'center', width: '180px' } }),
      fixed: 'left',
      render: text => <TextOverFlow text={text} />,
    },
    {
      title: '姓名',
      dataIndex: 'empName',
      onCell: () => ({ style: { textAlign: 'center', width: '180px' } }),
      onHeaderCell: () => ({ style: { textAlign: 'center', width: '180px' } }),
      fixed: 'left',
    },
    {
      title: '证件号',
      dataIndex: 'cardNo',
      onCell: () => ({ style: { textAlign: 'center', width: '180px' } }),
      onHeaderCell: () => ({ style: { textAlign: 'center', width: '180px' } }),
      fixed: 'left',
    },
    {
      title: '缴费人员类别',
      dataIndex: 'insIdeName',
      onCell: () => ({ style: { textAlign: 'center', width: '180px' } }),
      onHeaderCell: () => ({ style: { textAlign: 'center', width: '180px' } }),
      render: val => val || '--',
    },
    {
      title: '业务年月',
      dataIndex: 'busiYm',
      onCell: () => ({ style: { textAlign: 'center' } }),
      onHeaderCell: () => ({ style: { textAlign: 'center' } }),
      render: text => {
        if (text) {
          return `${`${text}`.substring(0, 4)}-${`${text}`.substring(4)}`;
        }
        return null;
      },
    },
    {
      title: '工资',
      children: [
        {
          title: '工资金额',
          dataIndex: ['wageDet', 'incmAmo'],
          onCell: () => ({ style: { textAlign: 'center' } }),
          onHeaderCell: () => ({ style: { textAlign: 'center' } }),
        },
        {
          title: '本期免税收入',
          dataIndex: ['wageDet', 'advAdjAmo'],
          onCell: () => ({ style: { textAlign: 'center' } }),
          onHeaderCell: () => ({ style: { textAlign: 'center' } }),
        },
        {
          title: '养老个人',
          dataIndex: ['wageDet', 'pensAmo'],
          onCell: () => ({ style: { textAlign: 'center' } }),
          onHeaderCell: () => ({ style: { textAlign: 'center' } }),
        },
        {
          title: '医疗个人',
          dataIndex: ['wageDet', 'medAmo'],
          onCell: () => ({ style: { textAlign: 'center' } }),
          onHeaderCell: () => ({ style: { textAlign: 'center' } }),
        },
        {
          title: '失业个人',
          dataIndex: ['wageDet', 'unempAmo'],
          onCell: () => ({ style: { textAlign: 'center' } }),
          onHeaderCell: () => ({ style: { textAlign: 'center' } }),
        },
        {
          title: '公积金个人',
          dataIndex: ['wageDet', 'accuAmo'],
          onCell: () => ({ style: { textAlign: 'center' } }),
          onHeaderCell: () => ({ style: { textAlign: 'center' } }),
        },
        {
          title: '累计子女教育支出',
          dataIndex: ['wageDet', 'acumChildEduPay'],
          onCell: () => ({ style: { textAlign: 'center' } }),
          onHeaderCell: () => ({ style: { textAlign: 'center' } }),
        },
        {
          title: '累计继续教育支出',
          dataIndex: ['wageDet', 'acumCntnuEduPay'],
          onCell: () => ({ style: { textAlign: 'center' } }),
          onHeaderCell: () => ({ style: { textAlign: 'center' } }),
        },
        {
          title: '累计住房贷款利息支出',
          dataIndex: ['wageDet', 'acumHousMortgPay'],
          onCell: () => ({ style: { textAlign: 'center' } }),
          onHeaderCell: () => ({ style: { textAlign: 'center' } }),
        },
        {
          title: '累计住房租金支出',
          dataIndex: ['wageDet', 'acumHousRentPay'],
          onCell: () => ({ style: { textAlign: 'center' } }),
          onHeaderCell: () => ({ style: { textAlign: 'center' } }),
        },
        {
          title: '累计赡养老人支出',
          dataIndex: ['wageDet', 'acumSuptElderPay'],
          onCell: () => ({ style: { textAlign: 'center' } }),
          onHeaderCell: () => ({ style: { textAlign: 'center' } }),
        },
        {
          title: '企业（职业）年金',
          dataIndex: ['wageDet', 'firmAnnui'],
          onCell: () => ({ style: { textAlign: 'center' } }),
          onHeaderCell: () => ({ style: { textAlign: 'center' } }),
        },
        {
          title: '商业健康保险',
          dataIndex: ['wageDet', 'comAnnui'],
          onCell: () => ({ style: { textAlign: 'center' } }),
          onHeaderCell: () => ({ style: { textAlign: 'center' } }),
        },
        {
          title: '税延养老保险',
          dataIndex: ['wageDet', 'defrPenAnnui'],
          onCell: () => ({ style: { textAlign: 'center' } }),
          onHeaderCell: () => ({ style: { textAlign: 'center' } }),
        },
        {
          title: '其他抵扣',
          dataIndex: ['wageDet', 'otherDedu'],
          onCell: () => ({ style: { textAlign: 'center' } }),
          onHeaderCell: () => ({ style: { textAlign: 'center' } }),
        },
        {
          title: '准予扣除的捐赠额',
          dataIndex: ['wageDet', 'allowDdctblDon'],
          onCell: () => ({ style: { textAlign: 'center' } }),
          onHeaderCell: () => ({ style: { textAlign: 'center' } }),
        },
        {
          title: '减免税额',
          dataIndex: ['wageDet', 'ddctblAmo'],
          onCell: () => ({ style: { textAlign: 'center' } }),
          onHeaderCell: () => ({ style: { textAlign: 'center' } }),
        },
        {
          title: '本月应缴税额',
          dataIndex: ['wageDet', 'taxblAmo'],
          onCell: () => ({ style: { textAlign: 'center' } }),
          onHeaderCell: () => ({ style: { textAlign: 'center' } }),
        },
        {
          title: '税后扣款',
          dataIndex: ['wageDet', 'aftAdjAmo'],
          onCell: () => ({ style: { textAlign: 'center' } }),
          onHeaderCell: () => ({ style: { textAlign: 'center' } }),
        },
        {
          title: '补退税额(上月)',
          dataIndex: ['wageDet', 'agoRtnAmo'],
          onCell: () => ({ style: { textAlign: 'center' } }),
          onHeaderCell: () => ({ style: { textAlign: 'center' } }),
        },
        {
          title: '实发金额',
          dataIndex: ['wageDet', 'realAmo'],
          onCell: () => ({ style: { textAlign: 'center' } }),
          onHeaderCell: () => ({ style: { textAlign: 'center' } }),
        },
        {
          title: '补退税额(本月)',
          dataIndex: ['wageDet', 'nowRtnAmo'],
          onCell: () => ({ style: { textAlign: 'center' } }),
          onHeaderCell: () => ({ style: { textAlign: 'center' } }),
        },
      ],
    },
    {
      title: '年终奖',
      children: [
        {
          title: '年终奖金额',
          dataIndex: ['yearEndDet', 'incmAmo'],
          onCell: () => ({ style: { textAlign: 'center' } }),
          onHeaderCell: () => ({ style: { textAlign: 'center' } }),
        },
        {
          title: '年终奖个人所得税',
          dataIndex: ['yearEndDet', 'taxblAmo'],
          onCell: () => ({ style: { textAlign: 'center' } }),
          onHeaderCell: () => ({ style: { textAlign: 'center' } }),
        },
        {
          title: '年终奖实发金额',
          dataIndex: ['yearEndDet', 'realAmo'],
          onCell: () => ({ style: { textAlign: 'center' } }),
          onHeaderCell: () => ({ style: { textAlign: 'center' } }),
        },
      ],
    },
    {
      title: '离职补偿金',
      children: [
        {
          title: '离职补偿金金额',
          dataIndex: ['resignDet', 'incmAmo'],
          onCell: () => ({ style: { textAlign: 'center' } }),
          onHeaderCell: () => ({ style: { textAlign: 'center' } }),
        },
        {
          title: '离职补偿金个人所得税',
          dataIndex: ['resignDet', 'taxblAmo'],
          onCell: () => ({ style: { textAlign: 'center' } }),
          onHeaderCell: () => ({ style: { textAlign: 'center' } }),
        },
        {
          title: '离职补偿金实发金额',
          dataIndex: ['resignDet', 'realAmo'],
          onCell: () => ({ style: { textAlign: 'center' } }),
          onHeaderCell: () => ({ style: { textAlign: 'center' } }),
        },
      ],
    },
    {
      title: '劳务报酬',
      children: [
        {
          title: '劳务报酬金额',
          dataIndex: ['remuneDet', 'incmAmo'],
          onCell: () => ({ style: { textAlign: 'center' } }),
          onHeaderCell: () => ({ style: { textAlign: 'center' } }),
        },
        {
          title: '劳务报酬个人所得税',
          dataIndex: ['remuneDet', 'taxblAmo'],
          onCell: () => ({ style: { textAlign: 'center' } }),
          onHeaderCell: () => ({ style: { textAlign: 'center' } }),
        },
        {
          title: '劳务报酬实发金额',
          dataIndex: ['remuneDet', 'realAmo'],
          onCell: () => ({ style: { textAlign: 'center' } }),
          onHeaderCell: () => ({ style: { textAlign: 'center' } }),
        },
      ],
    },
    {
      title: '实发合计',
      dataIndex: 'wageRealAmo',
      onCell: () => ({ style: { textAlign: 'center' } }),
      onHeaderCell: () => ({ style: { textAlign: 'center' } }),
    },
    {
      title: '个税合计',
      dataIndex: 'wageTaxblAmo',
      onCell: () => ({ style: { textAlign: 'center' } }),
      onHeaderCell: () => ({ style: { textAlign: 'center' } }),
    },
    {
      title: '工资应收合计',
      dataIndex: 'wageSum',
      onCell: () => ({ style: { textAlign: 'center' } }),
      onHeaderCell: () => ({ style: { textAlign: 'center' } }),
    },
    {
      title: '合计',
      dataIndex: 'sum',
      onCell: () => ({ style: { textAlign: 'center' } }),
      onHeaderCell: () => ({ style: { textAlign: 'center' } }),
    },
  ];

  componentDidMount = () => {
    const { comment } = this.props;
    const { nowPage, pageNum } = this.state;
    this.setState({ billId: comment });
    this.getList(nowPage, pageNum);
    window.clearInterval(uploadFiles);
  };

  // 获取列表数据
  getList = (nowPage, pageNum) => {
    const { comment, dispatch } = this.props;
    const billId = comment;
    const pageArg = {
      currentPage: nowPage,
      pageSize: pageNum,
    };
    let params = null;
    params = {
      billId,
      pageArg,
    };
    dispatch({
      type: 'chargebillns/getTableList',
      payload: params,
    }).then(res => {
      if (res.success && res.data) {
        res.data.pageRecords.map(item => {
          const temp = item;
          if (!item.empId) {
            temp.onceFee.feeAmo = item.oneOffAmo;
            temp.onceFee.detail = item.detail;
          }
          return true;
        });
        this.setState({
          dataSource: res.data.pageRecords,
          cmTotal: res.data.totalCount,
          titType: res.data.titType || 1, // 账单类型
        });
      } else {
        message.warning(`${res.message || '暂无数据！'}`);
      }
    });
  };

  // 导出
  export = () => {
    const { billId } = this.state;
    const { dispatch } = this.props;
    const params = {
      billIdList: billId,
    };
    this.setState({
      exportLoding: true,
    });
    dispatch({
      type: 'chargebillns/singleExport',
      payload: params,
    }).then(res => {
      if (res.success) {
        uploadFiles = setInterval(() => {
          dispatch({
            type: 'chargebillns/uploadFile',
            payload: { billKey: res.data, downType: 1 },
          }).then(resFile => {
            if (resFile.success) {
              if (resFile.success && resFile.data && resFile.data.fileId && resFile.data.fileName) {
                downloadFile({ fileId: resFile.data.fileId, fileName: resFile.data.fileName });
                window.clearInterval(uploadFiles);
                this.setState({
                  exportLoding: false,
                });
              }
            } else {
              message.warning(resFile.message || '下载失败');
              window.clearInterval(uploadFiles);
              this.setState({
                exportLoding: false,
              });
            }
          });
        }, 2000);
      } else {
        window.clearInterval(uploadFiles);
        this.setState({
          exportLoding: false,
        });
        message.warning(res.message || '下载失败');
      }
    });
  };

  render() {
    const {
      dataSource,
      titType,
      nowPage,
      pageNum,
      cmTotal,
      allScroll,
      insAccuScroll,
      salaryScroll,
      exportLoding,
    } = this.state;
    const { loading } = this.props;
    // table左边选择框
    const pagination = {
      defaultCurrent: 1, // 默认当前页
      defaultPageSize: 10, // 默认单页条数
      current: nowPage, // 当前页
      pageSize: pageNum, // 单页条数
      total: cmTotal, // 数据总数
      showQuickJumper: true, // 跳转至某页
      showSizeChanger: true, // 是否可以改变 pageSize
      onChange: (page, pageSize) => {
        // 页码改变的回调
        this.setState({ nowPage: page, pageNum: pageSize });
        this.getList(page, pageSize);
      },
      onShowSizeChange: (current, size) => {
        // 单页条数变化的回调
        this.setState({ nowPage: current, pageNum: size });
        this.getList(current, size);
      },
      showTotal: total => {
        const totalPage = total < pagination.pageSize ? 1 : Math.ceil(total / pagination.pageSize);
        return `共 ${total} 条记录 第 ${nowPage} / ${totalPage}页`;
      },
    };

    const onColumns = parameter => {
      if (parameter === 1) {
        return this.allColumns;
      }
      if (parameter === 2) {
        return this.insAccuColumns;
      }
      return this.salaryColumns;
    };
    const onScroll = parameter => {
      if (parameter === 1) {
        return allScroll;
      }
      if (parameter === 2) {
        return insAccuScroll;
      }
      return salaryScroll;
    };
    return (
      <Spin spinning={exportLoding}>
        <Row gutter={32} style={{ marginBottom: 16 }}>
          <Button style={{ marginLeft: 16 }} type="primary" onClick={() => this.export()}>
            <DownloadOutlined />
            下载
          </Button>
        </Row>
        <Table
          bordered
          dataSource={dataSource}
          rowKey="billDetId"
          loading={loading}
          scroll={onScroll(titType)}
          columns={onColumns(titType)}
          pagination={pagination}
        />
      </Spin>
    );
  }
}
export default ClientInfoDetails;
